<div id="editor-frontmatter-help">
  <div class="text-styles">
    <div class="crayons-notice crayons-notice--info" aria-live="polite">
      <p><strong>We have two editor versions</strong>. If you'd prefer to edit title and tags etc. as separate fields, switch to the "rich + markdown" option in <a href="<%= user_settings_path(tab: :customization) %>">Settings &raquo; UX</a>. Otherwise, continue...</p>
    </div>

    <ul>
      <li>This editor is a markdown editor that uses <a href="https://jekyllrb.com/docs/frontmatter">Jekyll front matter</a>.</li>
      <li>Most of the time, you can write inline HTML directly into your posts.</li>
      <li>We support native Liquid tags and created some fun custom ones, too! Trying embedding a Tweet or GitHub issue in your post.</li>
      <li>Links to unpublished posts are shareable for feedback/review.</li>
      <li>When you're ready to publish, set the published variable to <strong>true.</strong></li>
    </ul>

    <h3>Front Matter</h3>
    <p>Custom variables set for each post, located between the triple-dashed lines in your editor. Here is a list of possibilities:</p>
    <ul>
      <li><strong>title:</strong> the title of your article</li>
      <li><strong>published:</strong> boolean that determines whether or not your article is published</li>
      <li><strong>description:</strong> description area in Twitter cards and open graph cards</li>
      <li><strong>tags:</strong> max of four tags, needs to be comma-separated</li>
      <li><strong>canonical_url:</strong> link for the canonical version of the content</li>
      <li><strong>cover_image:</strong> cover image for post, accepts a URL. <br>The best size is 1000 x 420.</li>
      <li><strong>series:</strong> post series name.</li>
    </ul>
  </div>
</div>
